<template>
  <FlowModelRender ref="FlowModelDesigner"/>
</template>

<script>
import {DefaultFlowDefinition} from '@/components/flow/DefaultFlowDefinition';
import {DefaultFormDefinition} from '@/components/form/DefaultFormDefinition'
import FlowModelRender from '@/components/flow/FlowModelDesigner/FlowModelRender.vue';

export default {
  name: 'FlowModelDesigner',
  components: {
    FlowModelRender
  },
  data() {
    return {
      flowDefinition: DefaultFlowDefinition,
      formDefinition: DefaultFormDefinition,
      designer: undefined,
      flowModel: undefined,
    };
  },
  methods: {
    setData(flowDefinition) {
      this.flowDefinition = flowDefinition;

      this.parseFlow()
      this.$refs.FlowModelDesigner.setFormDefinition(this.formDefinition);
      this.$refs.FlowModelDesigner.setData(this.flowModel);
    },
    getFlowModel() {
      let flowModel = this.$refs.FlowModelDesigner.getFlowModel();
      this.flowDefinition.flowDefinition = JSON.stringify(flowModel);
    },
    parseFlow() {
      this.flowModel = JSON.parse(this.flowDefinition.flowDefinition);
    },
    setFormDefinition(formDefinition) {
      this.formDefinition = formDefinition;
      this.$refs.FlowModelDesigner.setFormDefinition(this.formDefinition);
    },
  }
};
</script>
